<template>
    <view class="yeji">
        <view class="yejiheader">
            <view>
                <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
            </view>
            <view class="tabs">
                <view class="aa" :class="{ active: currentTab === 0 }" @click="switchTab(0)" data-tab="0">成员目标</view>
                <view class="bb" :class="{ active: currentTab === 1 }" @click="switchTab(1)" data-tab="1">部门目标</view>
                <view class="cc" :class="{ active: currentTab === 2 }" @click="switchTab(2)" data-tab="2">公司目标</view>
            </view>


            <view>

                <p style="color: #2979ff;">全选</p>
            </view>

        </view>
        <view class="quanbu">
            <view style="font-size: 14px;">2020年 <img src="/static/img/xiajiantou.png" alt=""
                    style="width: 10px;height: 10px;vertical-align: middle;"> </view>
            <view style="font-size: 14px;">全部部门 <img src="/static/img/xiajiantou.png" alt=""
                    style="width: 10px;height: 10px;vertical-align: middle;"> </view>
            <view style="font-size: 14px;">成交金额 <img src="/static/img/xiajiantou.png" alt=""
                    style="width: 10px;height: 10px;vertical-align: middle;"> </view>
        </view>
        <view class="yejicontent">
            <view class="zhou" v-if="currentTab === 0" v-for="(item, index) in yejiList" :key="index">
                <view style="margin-left: 15px;">
                    <u-checkbox-group>
                        <u-checkbox shape="circle"></u-checkbox>
                    </u-checkbox-group>
                </view>

                <view style="display: flex; align-items: center;">
                    <view>

                        <img src="/static/img/1.png" alt="" style="width: 40px;height: 40px;">
                    </view>
                    <view style="margin-right: 60px;">

                        <p>{{ item.name }}</p>
                        <p>{{ item.department }}</p>
                    </view>
                    <view>
                        <p>{{ item.money }}</p>
                    </view>
                </view>
            </view>


            <view class="zhou" v-if="currentTab === 1" v-for="(item, index) in yejiListt" :key="index">
                <view style="margin-left: 15px;">
                    <u-checkbox-group>
                        <u-checkbox shape="circle"></u-checkbox>
                    </u-checkbox-group>
                </view>

                <view style="display: flex; align-items: center;">
                    <view>

                        <img src="/static/img/1.png" alt="" style="width: 40px;height: 40px;">
                    </view>
                    <view style="margin-right: 180px;">

                        <p>{{ item.name }}</p>
                    </view>
                    <view>
                        <p>{{ item.money }}</p>
                    </view>
                </view>
            </view>

            <view class="nian" v-for="(item, index) in niandu" :key="index">


                <view style="display: flex; align-items: center; justify-content: space-between;">
                    <view>{{ item.name }}</view>
                    <view><input class="input" type="text" placeholder="12000000"></view>

                </view>

            </view>
        </view>
        <view class="yejifooter">

        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const currentTab = ref(0)
const switchTab = (tab: number) => {
    currentTab.value = tab;
};
const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}
const yejiList = ref([
    { id: 0, name: '周小明', department: '销售部/销售经理', money: '12000000' },
    { id: 1, name: '周小明', department: '销售部/销售经理', money: '12000000' },
    { id: 2, name: '周小明', department: '销售部/销售经理', money: '12000000' },
    { id: 3, name: '周小明', department: '销售部/销售经理', money: '12000000' },
    { id: 4, name: '周小明', department: '销售部/销售经理', money: '12000000' },
    { id: 5, name: '周小明', department: '销售部/销售经理', money: '12000000' },
    { id: 6, name: '周小明', department: '销售部/销售经理', money: '12000000' },
    { id: 7, name: '周小明', department: '销售部/销售经理', money: '12000000' },
    { id: 8, name: '周小明', department: '销售部/销售经理', money: '12000000' },
    { id: 9, name: '周小明', department: '销售部/销售经理', money: '12000000' },
])


const yejiListt = ref([
    { id: 0, name: '总裁办', money: '1200' },
    { id: 1, name: '人事部', money: '1200' },
    { id: 2, name: '行政部', money: '1200' },
    { id: 3, name: '销售部', money: '1200' },
    { id: 4, name: '市场部', money: '1200' },
    { id: 5, name: '财务部', money: '1200' },
    { id: 6, name: '技术部', money: '1200' },


])
const niandu = ref([
    { id: 0, name: '年度目标', money: '100000' },
    { id: 1, name: '1月', money: '100000' },
    { id: 2, name: '2月', money: '100000' },
    { id: 3, name: '3月', money: '100000' },
    { id: 4, name: '4月', money: '100000' },
    { id: 5, name: '5月', money: '100000' },
    { id: 6, name: '6月', money: '100000' },
    { id: 7, name: '7月', money: '100000' },
    { id: 8, name: '8月', money: '100000' },
    { id: 9, name: '9月', money: '100000' },
    { id: 10, name: '10月', money: '100000' },
    { id: 11, name: '11月', money: '100000' },
    { id: 12, name: '12月', money: '100000' },


])

</script>

<style lang="scss">
.input {
    width: 120px;
    height: 30px;
    border: 1px solid #eee;
    margin-left: 150px;
}

.zhou {
    padding: 10px 10px;
    height: 80px;
    background: #fff;
    width: 345px;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
}

.nian {
    padding: 10px 10px;
    height: 40px;
    background: #fff;
    width: 345px;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
}

.quanbu {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    color: #666;
}

.aa {
    width: 80px;
    padding: 0 0px;
    font-size: 14px;
    color: #2979ff;
    border-radius: 5px 0 0 5px;
    border: 1px solid #2979ff;
    text-align: center;
}

.bb {
    width: 80px;
    padding: 0 0px;
    font-size: 14px;
    color: #2979ff;
    border-radius: 0px 0 0 0px;
    border: 1px solid #2979ff;
    text-align: center;
}

.cc {
    width: 80px;
    padding: 0 0px;
    font-size: 14px;
    color: #2979ff;
    border-radius: 0px 5px 5px 0px;
    border: 1px solid #2979ff;
    text-align: center;
}


.tabs {
    display: flex;

    .active {
        color: #fff;
        background-color: #2979ff;
    }
}

.yeji {
    width: 100vw;
    height: 100vh;
}

.yejiheader {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    background-color: #fff;
    margin-top: 20px;
}

.yejicontent {
    height: calc(100% - 100px - 80px);
    overflow: hidden;
    overflow-y: scroll;
    background-color: #eee;
}

.yejifooter {
    height: 80px;
}
</style>